import { BasicTable} from 'dw-mx-table';
import React, { useEffect, useState } from 'react';
import { request } from 'dw-mx-request';

export default function TableLazyLoading() {

    const [dataSource,setDataSource] = useState([])
    const columns = [
        {
            title: 'name',
            dataIndex: 'name',
            width: 100,
        },
        {
            title: 'age',
            dataIndex: 'age',
            width: 100,
        },
        {
            title: 'address',
            dataIndex: 'address',
            width: 200,
        },
        {
            title: 'date',
            dataIndex: 'date',
            width: 150,
        },
        {
            title: '任务状态',
            dataIndex: 'rwzt',
            width: 150,
        },
        {
            title: '业务类型',
            dataIndex: 'ywlx',
            width: 150,
        },
        {
            title: '搜索',
            dataIndex: 'ksmc',
            width: 100,
        },
    ];

    const [loading,setLoading] = useState(false);
    const [pagination,setPagination] = useState({
        current:1,
        pageSize:5,
        total:0,
    })

    useEffect(() => {
        fetch(1,5);
    },[])

    const lazyLoading = (pagination) => {
        fetch(pagination.current,pagination.pageSize);
    }

    const fetch = (current,pageSize) =>{
        setLoading(true);
        request('/sef2/mx/test/testtable',{
            current:current,
            pageSize:pageSize,
        }).then(ret =>{
            setPagination({
                current:current,
                pageSize:pageSize,
                total:ret.total
            })
            setDataSource(ret.data);
            setLoading(false);
        });
    }

    return (
        <BasicTable
            dataSource={dataSource}
            columns={columns}
            pagination={pagination}
            loading={loading}
            onChange={(pagination) => lazyLoading(pagination)}
        />
    )
}